<style lang="less">
	/*@import './international.less';*/
</style>

<template>
	<div>
		<common-page v-bind="dicPage" @tableOnRowDblclick="tableOnRowDblclick" ref="dic">
			<template slot="modal">
				<Form :model="dicPage.detailData" :label-width="80">
					<FormItem label="编码">
						<Input v-model="dicPage.detailData.sn"></Input>
					</FormItem>
					<FormItem label="名称">
						<Input v-model="dicPage.detailData.text"></Input>
					</FormItem>
					<FormItem label="状态">
						<Select v-model="dicPage.detailData.state">
							<Option value="1" :key="1">有效</Option>
							<Option value="2" :key="2">无效</Option>
						</Select>
					</FormItem>
				</Form>
			</template>
		</common-page>
		<br>
		<h2 :style="{textAlign:'center'}">双击上方字典记录行,下方显示字典值</h2>
		<br>
		<common-page v-bind="menuPage" ref="info">
			<template slot="modal">
				<Form :model="menuPage.detailData" :label-width="80" :rules="infoRule" ref="form">
					<FormItem label="编码">
						<Input v-model="menuPage.detailData.sn"></Input>
					</FormItem>
					<FormItem label="名称">
						<Input v-model="menuPage.detailData.text"></Input>
					</FormItem>
					<FormItem label="状态">
						<Select v-model="menuPage.detailData.state">
							<Option value="1" :key="1">有效</Option>
							<Option value="2" :key="2">无效</Option>
						</Select>
					</FormItem>
					<FormItem label="字典编码" prop="psn">
						<Input v-model="menuPage.detailData.psn" :disabled="true"></Input>
					</FormItem>
				</Form>
			</template>
		</common-page>
	</div>
</template>

<script>

    import commonPage from '@/views/common/common-page.vue';
    import util from '@/libs/util';
    import autoSelect from '@/views/common/autoSelect.vue';

    // 默认界面查询条件
    let pageParams = Object.assign({}, util.queryParams, { // 额外的参数,比如条件的默认值
        sortName: "id",
        sortOrder: "asc"
    });
    let pageInfoParams = Object.assign({}, util.queryParams, { // 额外的参数,比如条件的默认值
        sortName: "id",
        sortOrder: "asc",
        psn: "_NONE"
    });

    export default {
        name: 'dictionary-page',
        components: {
            commonPage
        },
        props: {
            columns: Array
        },
        data () {
            return {
                dicPage: {
                    toolbar: {
                        menuSn: "dictionary",
                        buttons: []
                    },
                    list: {
                        table: {
                            columns: [
                                {type: 'selection', width: 50, align: 'center'},
                                {type: 'index', width: 60, align: 'center'},
                                {title: 'ID', key: 'id', sortable: "custom"},
                                {title: '编号', key: 'sn'},
                                {title: '名称', key: 'text'},
                                {
                                    title: '状态', key: 'state', render: (h, obj) => {
                                    if (obj.row.state === "1") {
                                        return "有效";
                                    } else if (obj.row.state === "2") {
                                        return "无效";
                                    }
                                    return obj.row.state;
                                }
                                }
                            ],
                            data: []
                        },
                        url: "dictionary/list",
                        queryParams: pageParams
                    },
                    searchbar: {
                        queryParams: pageParams,
                        inputs: [
                            {
                                text: "ID",
                                sn: "id",
                                style: {
                                    width: "200px"
                                }
                            },
                            {
                                text: "编号",
                                sn: "sn",
                                style: {
                                    width: "200px"
                                }
                            },
                            {
                                text: "名称",
                                sn: "text",
                                style: {
                                    width: "200px"
                                }
                            },
                            {
                                text: "状态",
                                sn: "state",
                                style: {
                                    width: "200px"
                                },
                                type: "select",
                                clearable: true,
                                options: [{
                                    text: "有效",
                                    value: "1"
                                }, {
                                    text: "无效",
                                    value: "2"
                                }]
                            }
                        ]
                    },
                    pageParams: pageParams,
                    detailData: {
                        sn: "",
                        text: "",
                        state: "1"
                    }
                },

                menuPage: {
                    toolbar: {
                        menuSn: "dictionaryinfo",
                        buttons: []
                    },
                    list: {
                        table: {
                            columns: [
                                {type: 'selection', width: 50, align: 'center'},
                                {type: 'index', width: 60, align: 'center'},
                                {title: 'ID', key: 'id'},
                                {title: '编码', key: 'sn'},
                                {title: '名称', key: 'text'},
                                {
                                    title: '状态', key: 'state', render: (h, obj) => {
                                    if (obj.row.state === "1") {
                                        return "有效";
                                    } else if (obj.row.state === "2") {
                                        return "无效";
                                    }
                                    return obj.row.state;
                                }
                                },
                                {title: '字典编码', key: 'psn'}
                            ],
                            data: []
                        },
                        url: "dictionaryinfo/list",
                        queryParams: pageInfoParams
                    },
                    searchbar: {
                        queryParams: pageInfoParams,
                        hideButtons: true
                    },
                    pageParams: pageInfoParams,
                    detailData: {
                        id: "",
                        sn: "",
                        text: "",
                        state: "1",
                        psn: ""
                    },
                    form: null
                },

                infoRule: {
                    psn: [
                        {required: true, message: '必填,选中上方记录以后可以自动写入值'}
                    ]
                }
            };
        },
        methods: {
            tableOnRowDblclick(obj, index) {
                let me = this;
                pageInfoParams.psn = obj.sn;
                me.$refs.dic.getInitDetailData().psn = obj.sn;
                me.$refs.info.$refs.list.load();
            }
        },
        created () {
        },
        mounted() {
            this.menuPage.form = this.$refs.form; // 传递表单对象用于校验
        }
    };
</script>
